<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册页面</title>
    <link href="css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="js/bootstrap4.3.1/bootstrap.min.css">
    <link rel="stylesheet" href="./css/register.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap4.3.1/bootstrap.min.js"></script>
    <script src="./js/ajaxUtils.js" type="module"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/register.js" type="module"></script>
</head>

<body>
    <main class="container-fluid">
        <section style="height: 100vh;" class="row from-group justify-content-center align-items-center">
            <form action="" method="post" role="form" class="col-md-4 col-12 form-horizontal m-0">
                <fieldset>
                    <legend><i class="fa fa-user-circle fa-1g mb-4"></i>&nbsp;<span class="text-primary">用户信息注册</span></legend>
                </fieldset>
                <div class="input-group mb-2">
                    <label for="userName" class="d-none d-md-block col-md-2 control-label"><span class="text">用户名：</span></label>
                    <div class="col-md-6">
                        <input type="text" name="userName" id="userName" placeholder="请输入英文或数字组合信息" class="form-control">
                    </div>
                    <div>
                        <nav id="userNameMsg" class="alert alert-base fade show"></nav>
                    </div>
                </div>
                <div class="input-group mb-2">
                    <label for="nickName" class="d-none d-md-block col-md-2 control-label"><span class="text">昵称：</span></label>
                    <div class="col-md-6">
                        <input type="text" name="nickName" id="nickName" placeholder="可以输入中文信息" class="form-control">
                    </div>
                    <nav id="nickNameMsg" class="alert alert-base fade show"></nav>
                </div>
                <div class="input-group mb-2">
                    <label for="password" class="d-none d-md-block col-md-2 control-label"><span class="text">密码：</span></label>
                    <div class="col-md-6">
                        <input type="password" name="password" id="password" placeholder="请输入密码" class="form-control">
                    </div>
                    <nav id="passwordMsg" class="alert alert-base fade show"></nav>
                </div>
                <div class="input-group mb-2">
                    <label for="rePassword" class="d-none d-md-block col-md-2 control-label"><span class="text">重复密码：</span></label>
                    <div class="col-md-6">
                        <input type="password" name="rePassword" id="rePassword" placeholder="请重复输入密码" class="form-control">
                    </div>
                    <nav id="rePasswordMsg" class="alert alert-base fade show"></nav>
                </div>
                <div class="input-group mb-2">
                    <label class="col-md-2 control-label"><span class="text">性别：</span></label>
                    <div class="col-md-2 col-4">
                        <input type="radio" name="sex" id="man" value="1">
                        <label for="man" class="checkbox-inline">男</label>
                    </div>
                    <div class="col-md-2 col-4">
                        <input type="radio" name="sex" id="woman" value="2">
                        <label for="woman" class="checkbox-inline">女</label>
                    </div>
                </div>
                </div>
                <div class="input-group mb-2">
                    <label for="photo" class="d-none d-md-block col-md-2 control-label"><span class="text">手机号：</span></label>
                    <div class="col-md-6">
                        <input type="text" name="photo" id="photo" placeholder="请输入电话号码" class="form-control">
                    </div>
                    <nav id="photoMsg" class="alert alert-base fade show"></nav>
                </div>
                <div class="input-group mb-2">
                    <label for="email" class="d-none d-md-block col-md-2 control-label"><span class="text">Email：</span></label>
                    <div class="col-md-6">
                        <input type="email" name="email" id="email" placeholder="请输入邮箱地址" class="form-control">
                    </div>
                    <nav id="emailMsg" class="alert alert-base fade show"></nav>
                </div>
                <div class="input-group mb-2">
                    <label for="birthday" class="d-none d-md-block col-md-2 control-label">
                    <span class="text">生日：</span></label>
                    <div class="col-md-6">
                        <input type="date" name="birthday" id="birthday" class="form-control">
                    </div>
                </div>
                <div class="input-group mb-2">
                    <label class="col-md-2 control-label">
                        <span class="text">爱好：</span>
                    </label>
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-4 col-md-2 offset-md-2">
                                <input type="checkbox" name="hobby" id="music"><label for="music" class="checkbox-inline">唱歌</label>
                            </div>
                            <div class="col-4 col-md-2">
                                <input type="checkbox" name="hobby" id="sport"><label for="sport" class="checkbox-inline">运动</label>
                            </div>
                            <div class="col-4 col-md-2">
                                <input type="checkbox" name="hobby" id="code"><label for="code" class="checkbox-inline">编码</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4 col-md-2 offset-md-2">
                                <input type="checkbox" name="hobby" id="book"><label for="book" class="checkbox-inline">看书</label>
                            </div>
                            <div class="col-4 col-md-2">
                                <input type="checkbox" name="hobby" id="debug"><label for="debug" class="checkbox-inline">调bug</label>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
                <div class="input-group mb-2">
                    <label for="from" class="col-md-2 control-label"><span class="text">来自于：</span></label>
                    <div class="col-md-3">
                        <select name="province" id="province" class="form-control"></select>&nbsp;&nbsp;
                    </div>
                    <div class="col-md-3">
                        <select name="city" id="city" class="form-control"></select>
                    </div>
                </div>
                <div>
                    <div class="col-md-10">
                        <button type="submit" class="form-control btn-lg btn btn-primary">注册</button>
                    </div>
                </div>
            </form>
        </section>
    </main>
</body>

</html>